<template>
	<view class="page-content"
		style="background-color: rgb(19, 31, 79);width: auto;height: auto;padding-bottom: 200rpx;overflow: hidden;">
		<view class="topBg">
			<view style="width: 100%;">
				<u-navbar title="邀请" @rightClick="rightClick" :autoBack="true" :bgColor="barTopBg" leftIconColor="#fff"
					titleStyle="color:#fff" :placeholder="true">
				</u-navbar>
				<view class="pd-20 display_row_btn_center" style="padding-right: 0;width: 100%;" v-if="user.id">
					<u-image :src="user.headimg" width="130rpx" height="130rpx" shape="circle"></u-image>
					<view class="itemBase f_28">
						<view class="display_row_btn_center"><text class="c_ffffff title">{{user.username}}</text>
							<view class="bgVip">
								<view class="ml-10">
									<u-image
										src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/%E5%88%9B%E4%BA%AB%E9%9D%92%E9%93%9Cvip1.png"
										width="170rpx" height="45rpx" mode="widthFix">
									</u-image>
								</view>
								<text class="c_ffffff f_24 vipText">{{user.vip_name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="display_col_center c_ffffff">
				<text class="text1">邀请用户升级级别</text>
				<text class="text2">获得团队收益</text>
			</view>
			<view class="btmBox c_ffffff" @click="showPop" style="margin-left: 0;">
				立即邀请
			</view>
		</view>

		<view class="bottomBg c_ffffff display_col_center">
			<text class="c_C62B2C subTitle">收益三步走</text>
			<view class="itemBox1 display_row_btn_center">
				<view class="display_col_center">
					<u-image
						src="https://dtkj-qnyimg.diankuai.com/%E9%82%80%E8%AF%B7%E9%A1%B5%E9%9D%A2/%E5%88%86%E4%BA%AB%281%29.png"
						width="80rpx" height="80rpx" shape="circle"></u-image>
					<text>邀请好友</text>
				</view>
				<u-line direction="row" color="#999999" length="10%" :customStyle="{marginTop: '-40rpx'}"></u-line>
				<view class="display_col_center">
					<u-image
						src="https://dtkj-qnyimg.diankuai.com/%E9%82%80%E8%AF%B7%E9%A1%B5%E9%9D%A2/%E6%8E%A5%E5%8D%95.png"
						width="80rpx" height="80rpx" shape="circle"></u-image>
					<text>好友完成注册</text>
				</view>
				<u-line direction="row" color="#999999" length="10%" :customStyle="{marginTop: '-40rpx'}"></u-line>
				<view class="display_col_center">
					<u-image
						src="https://dtkj-qnyimg.diankuai.com/%E9%82%80%E8%AF%B7%E9%A1%B5%E9%9D%A2/%E6%B3%A8%E5%86%8C.png"
						width="80rpx" height="80rpx" shape="circle"></u-image>
					<text>开始接单</text>
				</view>
			</view>

			<text class="c_C62B2C subTitle">我的邀请战绩</text>

			<view class="itemBox2">
				<view class="display_row_center" style="width:70%;margin-top: 40rpx;padding-bottom: 20rpx;">
					<view style="flex: 1;" class="display_col_center">
						<view class="display_row_center f_30 nextTotal">
							<view style="position: relative;">{{nextLevel.user_today|0}}<text class="today">今</text>
							</view>/{{nextLevel.user_total|0}}
						</view>
						<text>邀请用户</text>
					</view>
					<u-line direction="col" color="#999999"></u-line>
					<view style="flex: 1;" class="display_col_center">
						<view class="display_row_center f_30 nextTotal c_C62B2C" style="color: #C62B2C;">
							<view style="position: relative;">{{income.today.group|0}}<text class="today">今</text>
							</view>
							/{{income.totle.group|0}}
						</view>
						<text>邀请收益</text>
					</view>
				</view>
				<u-line direction="row" color="#999999"></u-line>

				<uni-list v-if="dataList.length" @scrolltolower="listScrollTolower" style="width: 100%;"
					:border="false">
					<view v-for="(item, index) in dataList" :key="index" @click="itemClick(item)">
						<view class="display_row_btn_center itemBox">
							<u-image :src="item.headimg" width="80rpx" height="80rpx" shape="circle">
							</u-image>
							<view style="flex: 1;margin-left: 10rpx;" class="ainfoBox">
								<text class="c_ffffff f_30">{{dealPhone(item.phone,item.username,item.nickname)}}</text>
								<text class="c_999999 f_24">{{item.vip_name}}</text>
								<text class="c_999999 f_24">{{item.create_at}}</text>
							</view>
							<view class="ainfoBox" style="justify-content: center;align-items: center;">
								<text class="c_C62B2C f_34" style="font-weight: bold;">￥{{item.rebate_total}}</text>
							</view>
						</view>
						<u-line direction="row" color="#999999"></u-line>
					</view>
				</uni-list>
				<u-empty mode="list" v-else :customStyle="{flex:'1'}"></u-empty>
			</view>
		</view>

		<uni-popup type="center" ref="popup">
			<view class="share_img" :style="{backgroundImage:'url('+share_url+')'}">
				<view class="popBtnBox">
					<u-button :plain="true" type="error" :customStyle="{borderRadius:'100rpx'}" @click="saveLoc">保存本地
					</u-button>
					<u-button type="default" :customStyle="{borderRadius:'100rpx',backgroundColor: '#4F65EE'
					,color:'#fff',marginLeft:'20rpx'}" open-type="share">立即分享</u-button>
				</view>
			</view>
		</uni-popup>

		<uni-popup type="center" ref="popupRqt" background-color="#ffffff" class="mpop">
			<view style="height: 400rpx;display: flex;flex-direction: column;justify-content: space-between;">
				<view>
					<view class="popTitle">
						提示
					</view>
					<u-divider :customStyle="{margin:'0px'}"></u-divider>
				</view>
				<view style="flex: 1;" class="display_col_center">
					<text>请授予相册相关权限</text>
				</view>
				<view style="display: flex;flex-direction: row;">
					<u-button type="primary" text="取消" plain :customStyle="{flex:1}" @click="closePop"></u-button>
					<u-button type="success" text="去授权" :customStyle="{flex:1}" openType="openSetting" @click="goSq">
					</u-button>
				</view>
			</view>
		</uni-popup>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getFrom,
		getOrderCollect,
		getQrcode,
		getUserImage
	} from '@/config/api.js'

	export default {
		data() {
			return {
				user: uni.getStorageSync('UserInfo', null),
				income: null,
				dataList: [],
				page: 1,
				pages: 1,
				nextLevel: null,
				share_url: "",
				barTopBg: "transparent",
			}
		},
		onLoad() {
			this.getCollect();
			this.getList();
			this.getQrCode();
		},
		methods: {
			dealPhone(phone, username, nickname) {
				if (phone != '') {
					return phone.substring(0, 3) + '****' + phone.substring(7);
				}

				return username != "" ? username : nickname;
			},
			onPageScroll: function(e) {
				if (e.scrollTop == 0) {
					this.barTopBg = "transparent";
				} else if (e.scrollTop >= 40) {
					this.barTopBg = "#131F49";
				}
			},
			onShareAppMessage() {
				return {
					title: '抖特分享',
					path: "/pages/tabbar/tabbar-4/tabbar-4?ivcode=" + this.user.invitation_code,
					imageUrl: this.share_url
				}
			},
			saveLoc() {
				var that = this;
				uni.downloadFile({
					url: this.share_url, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success(e) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											uni.showToast({
												title: '保存成功',
												icon: 'none',
												duration: 2000,
												mask: true
											});
										},
										fail: function(err) {
											if (err)
												uni.showToast({
													title: '保存失败',
													icon: 'none'
												});
										}
									});
								},
								fail: (err) => {
									that.$refs.popup.close();
									this.$refs.popupRqt.open();
								}
							});
							return;
						}

						uni.showToast({
							title: "保存失败",
							duration: 2000
						})

						return;
					}
				});
			},
			goSq() {
				this.closePop();
				// uni.openSetting()
			},
			closePop() {
				this.$refs.popupRqt.close();
			},
			showPop() {
				if (this.share_url == "") {
					uni.showToast({
						title: "正在生成推广页",
						duration: 2000
					})

					return;
				}
				this.$refs.popup.open();
			},
			itemClick(data) {
				uni.navigateTo({
					url: "/pages/center/nextLevel?id=" + data.id
				})
			},
			getImage() {
				getUserImage().then(res => {
					this.share_url = res.url
				});
			},
			getQrCode() {
				getQrcode().then(res => {
					if (res.hasOwnProperty('path')) {
						this.share_url = res.path
					} else {
						this.getImage();
					}
				});
			},
			getList() {
				getFrom({
					page: this.page
				}).then((res) => {
					this.nextLevel = res.total;
					this.dataList = this.dataList.concat(res.list);
					this.pages = res.page.pages;
					this.page++;
				}).catch((err) => {
					this.nextLevel={
						user_today:0,
						user_total:0
					};
					this.dataList=[];
				});
			},
			onReachBottom(e) {
				this.listScrollTolower();
			},
			onPullDownRefresh(e) {
				uni.stopPullDownRefresh();
			},
			listScrollTolower() {
				if (this.page <= this.pages) {
					this.getList();
				}
			},
			getCollect() {
				getOrderCollect().then(res => {
					this.income = res
				}).catch(err => {
					this.income = {
						today: {
							group: 0
						},
						totle: {
							group: 0
						}
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #131F49 !important;
	}
</style>
<style scoped>
	.itemBaseBox {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex: 6;

	}

	.itemBase {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: 20rpx;
		padding-top: 20rpx;
		height: 130rpx;
		flex: 2;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.bgVip {
		position: relative;
	}

	.vipText {
		position: absolute;
		top: 3px;
		left: 80rpx;
	}

	.topBg {
		background-image: url('https://dtkj-qnyimg.diankuai.com/%E9%82%80%E8%AF%B7%E9%A1%B5%E9%9D%A2/%E5%9B%BE%E5%B1%82%201.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		height: 1000rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.text1 {
		font-size: 60rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #fff;
	}

	.text2 {
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
	}

	.bottomBg {
		background-color: rgb(19, 31, 79);
	}

	.subTitle {
		font-size: 36rpx;
		font-weight: bold;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.itemBox1 {
		border-radius: 20rpx;
		width: 95%;
		padding: 40rpx 0;
		justify-content: space-around;
	}

	.itemBox2 {
		background-color: rgb(39, 55, 122);
		width: 95%;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		min-height: 400rpx;
	}

	.itemBox2Top:before,
	.itemBox2Top:after,
	.itemBox2Bottem:before,
	.itemBox2Bottem:after {
		content: '';
		position: absolute;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: rgb(19, 31, 79);
		z-index: 10;
	}

	.itemBox2Top:before {
		top: -40rpx;
		left: -40rpx;
	}

	.itemBox2Top:after {
		top: -40rpx;
		right: -40rpx;
	}

	.itemBox2Bottem:before {
		bottom: -40rpx;
		left: -40rpx;
	}

	.itemBox2Bottem:after {
		bottom: -40rpx;
		right: -40rpx;
	}

	.nextTotal {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
	}

	.today {
		background-color: #C62B2C;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		color: #fff;
		font-size: 22rpx;
		font-weight: normal;
		border-radius: 15rpx;
		position: absolute;
		top: -22rpx;
		margin-left: -20rpx;
	}

	.itemBox {
		padding: 20rpx 0px;
	}

	.ainfoBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 80rpx;
		align-items: flex-start;
	}

	/deep/ .mpop>.uni-popup__wrapper.center {
		width: 80%;
		border-radius: 20rpx;
		height: auto !important;
	}

	/deep/ .uni-popup__wrapper.center {
		width: 80%;
		border-radius: 20rpx;
	}

	.share_img {
		/* background-image: url('https://dtkj.diankuai.com/static/img/share.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 100%;
		position: relative;
		height: 50vh;
	}

	.baseInfo {
		height: 120rpx;
		display: flex;
		flex-direction: row;
		padding: 15rpx 20rpx;
	}

	.minfo {
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		height: 100rpx;
	}

	.popBtnBox {
		position: absolute;
		bottom: -100rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.popTitle {
		font-size: 40rpx;
		font-weight: 600;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}
</style>
